<template>
  <div class="add-ti">
    <ckeditor id="ck" v-model="quesData.content" :height="'90px'" :placeholder="'请输入题干'"></ckeditor>
    <addUploads :quesFileList="quesData.quesFileList"></addUploads>
    <div v-if="quesType == 5">
      <div class="answer-exercise-list">
        <div class="answer-exercise-lis options-box" v-for="(item,index) in quesData.answer" :key="index">
          <span>填空&nbsp;&nbsp;{{index+1}}:</span>
          <div class="exercise-input">
            <a-textarea v-model="item.Content" :placeholder="'请填写填空'+(index+1)+'内容'" auto-size />
          </div>
          <div class="options-controls">
            <i class="Ti-icon options-icon icon-delete" @click="setDelete(index)"></i>
          </div>
        </div>
      </div>
      <a-button style="margin-left: 70px;margin-bottom: 10px;" type="primary" @click="addExercise">添加填空</a-button>
      <div style="line-height: 37px;margin-bottom: 10px;line-height: 24px;">
        <span>参考答案：</span>
        <div style="display: inline-block;width: calc(100% - 96px);vertical-align: top;">
          <div class="answer-exercise-lis" v-for="(item,index) in quesData.answer" :key="index">
            <span>填空&nbsp;&nbsp;{{index+1}}:</span>
            <div class="exercise-input">
              {{item.Content}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <span style="line-height: 37px;">答案解析：</span>
      <div style="display: inline-block;width: calc(100% - 100px);vertical-align: top;">
        <ckeditor id="ck" v-model="quesData.analysis" :height="'90px'" :placeholder="'请输入解析'"></ckeditor>
      </div>
    </div>
  </div>
</template>

<script>
import addUploads from '@/components/addTi/addUpload/index.vue';
export default {
  data() {
    return {
      
    };
  },
  components: {
    addUploads
  },
  props: {
    quesData: {
      type: Object,
      default: () => {}
    },
    quesType: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    console.log(this.quesData);
  },
  methods: {
    getContent() {
      setTimeout(() => {
        console.log(this.quesData);
      }, 200);
    },
    setDelete(index) {
      this.quesData.answer.splice(index, 1);
      var results = this.quesData.content.match(/<img[^>]+>/g);
      var result = [];
      for (let i = 0; i < results.length; i++) {
        if (results[i].indexOf("question_button/BlankSpace") != -1) {
          result.push(results[i]);
        }
      }
      this.quesData.content = this.quesData.content.split(result[index]).join('');
      // @ts-ignore
      var results2 = this.quesData.content.match(/<img[^>]+>/g);
      var result2 = [];
      for (let i = 0; i < results2.length; i++) {
        if (results2[i].indexOf("question_button/BlankSpace") != -1) {
          result2.push(results2[i]);
        }
      }
      // 重新排序填空题的题干
      if (result2) {
        for (let i = 0; i < result2.length; i++) {
          let key = i + 1;
          var vlaImg = `<img data-index="${key}" src="https://cdn-zjy.icve.com.cn/common/images/question_button/BlankSpace${key}.gif">`;
          this.quesData.content = this.quesData.content.split(result2[i]).join(vlaImg);
        }
      }
    },
    addExercise() {
      var num = this.getStrCount();
      var cise = { SortOrder: num-1, Content: '' };
      this.quesData.answer.push(cise);
      var numImg = `<img data-index="${num}" src="https://cdn-zjy.icve.com.cn/common/images/question_button/BlankSpace${num}.gif">`;
      if (this.quesData.content == '') {
        this.quesData.content = this.quesData.content + numImg;
      } else {
        var txtIndex = this.quesData.content.lastIndexOf('</p>');
        this.quesData.content = this.quesData.content.slice(0, txtIndex) + numImg + this.quesData.content.slice(txtIndex);
      }
    },
    getStrCount() {
      //scrstr 源字符串 armstr 特殊字符
      var count = 1;
      var scrstr = this.quesData.content;
      var armstr = 'https://cdn-zjy.icve.com.cn/common/images/question_button/BlankSpace';
      while (scrstr.indexOf(armstr) != -1) {
        scrstr = scrstr.replace(armstr, '');
        count++;
      }
      return count;
    },
    onChange(e) {
      console.log('radio checked', e.target.value);
    }
  }
};
</script>

<style>
</style>